<template>
	<view :style="inspectionTheme">
		<up-popup :show="props.show" mode="center" @close="handleClose" :closeable="props.closeable" round="10"
			custom-style="width: 620rpx;">
			<view class="title"
				:style="{ 'padding-bottom': props.content?'24rpx':'100rpx','text-align':props.titleAlign }">
				<slot>
					<text class="default-text">{{props.title}}</text>
				</slot>
			</view>
			<view class="content" :style="{'text-align':props.contentAlign,'color':props.contentColor,'padding-bottom':props.type?'32rpx':'100rpx' }"
				v-if="props.content">
				<slot>
					<view class="default-text">{{props.content}}</view>
				</slot>
			</view>
			<view class="up-margin-bottom-60">
				<view class="flex-justify-center up-margin-left-40 up-margin-right-40 " v-if="props.closeBtn">
					<template v-if="!props.reverse">
						<view class="leftButton" @click.stop="handleCancel">{{props.closeText}}</view>
						<view class="rightButton" @click.stop="handleConfirm"
							>{{props.confirmText}}</view>
					</template>
					<template v-else>
						<view class="rightButton" @click.stop="handleConfirm"
							>{{props.confirmText}}</view>
						<view class="leftButton" @click.stop="handleCancel">{{props.closeText}}</view>
					</template>
				</view>
				<view class="center-btn" v-else>
					<view class="confirmButton" @click.stop="handleConfirm"
						>{{props.confirmText}}</view>
				</view>
			</view>

		</up-popup>
	</view>
</template>

<script setup>
	import {
		defineProps,
		defineEmits,
		computed
	} from 'vue';
	import {
		useStore
	} from 'vuex'
	const store = useStore()
	const inspectionTheme = computed(() => store.state.user.inspectionTheme)
	const props = defineProps({
		show: {
			type: Boolean,
			default: false
		},
		//是否启用右上角关闭
		closeable: {
			type: Boolean,
			default: false
		},
		//标题
		title: {
			type: String,
			default: ''
		},
		//标题字体方向
		titleAlign: {
			type: String,
			default: 'center'
		},
		//文本内容
		content: {
			type: String,
			default: ''
		},
		//文本字体方向
		contentAlign: {
			type: String,
			default: 'center'
		},
		//文本字体颜色
		contentColor: {
			type: String,
			default: '#000'
		},
		//确定按钮文字
		confirmText: {
			type: String,
			default: '确定'
		},
		//关闭按钮文字
		closeText: {
			type: String,
			default: '关闭'
		},
		//是否启用关闭按钮
		closeBtn: {
			type: Boolean,
			default: false
		},
		reverse: {
			type: Boolean,
			default: false
		},
		type:{
			type: String,
			default: ''
		}

	});
	const emit = defineEmits(['update:show', 'close','cancel', 'confirm']);
	const handleClose = () => {
		emit('update:show', false);
		emit('close');
	};
	const handleCancel = () => {
		emit('update:show', false);
		emit('cancel');
	};
	const handleConfirm = () => {
		emit('update:show', false);
		emit('confirm');
	};
</script>

<style lang="scss" scoped>
	.flex-justify-center {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.title {
		padding: 60rpx 40rpx 0 49rpx;
		font-weight: 600;
		font-size: 40rpx;
		color: #000000;
	}

	.content {
		padding-left: 24rpx;
		padding-right: 24rpx;
		font-size: 32rpx;
	}

	.leftButton {
		width: 250rpx;
		height: 80rpx;
		background: #F0F3F6;
		border-radius: 10rpx;
		font-weight: 600;
		font-size: 36rpx;
		color: #000000;
		line-height: 80rpx;
		text-align: center;
	}

	.rightButton {
		width: 250rpx;
		height: 80rpx;
		border-radius: 10rpx;
		font-weight: 600;
		font-size: 36rpx;
		color: #FFFFFF;
		line-height: 80rpx;
		text-align: center;
		background-color: var(--primary-color);
	}

	.center-btn {
		display: flex;
		justify-content: center;
		/* 水平居中 */
		width: 100%;
		/* 确保父容器宽度充足 */
	}

	.confirmButton {
		width: 440rpx;
		height: 80rpx;
		border-radius: 10rpx;
		font-weight: 600;
		font-size: 36rpx;
		color: #FFFFFF;
		line-height: 80rpx;
		text-align: center;
		background-color: var(--primary-color);
	}
</style>